<template>


  <div class="container">
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <div style="letter-spacing: 1rem;color: ghostwhite;font-weight: bold;font-size:3.2rem;text-align: center;">
            管壳车间生产管理大屏
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="8" style="margin: 1rem;width: 38vw;height: 26vh">
        <div style="text-align: center;color: white;font-size: 1.0rem;font-weight: bold;">工单未下达提醒</div>

        <div>
          <div style="font-size: x-small;padding-left: 2rem;padding-top: 0.5rem;color:white;">

            <el-row>
              <el-col :span="6" style="padding-left: 2rem">
                <div>工单号</div>
              </el-col>
              <el-col :span="5">
                <div style="padding-left: 2rem">品名</div>
              </el-col>
              <el-col :span="6">
                <div style="position: relative;left: 5.5rem;">规格</div>
              </el-col>
              <el-col :span="4">
                <div style="position: relative;left:5rem;">开工日期</div>
              </el-col>
              <el-col :span="3">
                <div style="position: relative;left:2.7rem;">数量</div>
              </el-col>
            </el-row>

          </div>

          <div ref="tableContent8" class="table-content">
            <template v-for="(item, index) in shopOrderLessList">
              <div class="table-line content-line" v-if="">
                <div
                    style="text-align: center;font-size: 80%;padding-top: 0.5rem;padding-bottom: 0.3rem;letter-spacing: 0.1rem;">
                  <el-row>
                    <el-col :span="6">
                      <div>{{ item.shopOrder }}</div>
                    </el-col>
                    <el-col :span="5">
                      <div>{{ item.itemName }}</div>
                    </el-col>
                    <el-col :span="8">
                      <div>{{ item.itemDesc }}</div>
                    </el-col>
                    <el-col :span="3">
                      <div style="padding-left: 0.5rem">{{ item.startTimeWish }}</div>
                    </el-col>
                    <el-col :span="2">
                      <div>{{ item.releaseQty }}</div>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </template>
          </div>

        </div>
      </el-col>

      <el-col :span="8" style="margin: 1rem;width: 26vw;height: 26vh">
        <div style="text-align: center;color: white;font-size: 1.0rem;font-weight: bold;">工单派工入库</div>
        <div>
          <div style="font-size: x-small;padding-left: 2rem;padding-top: 0.5rem;color:white;">

            <el-row>
              <el-col :span="6" style="padding-left: 2rem">
                <div style="position: relative;right: 1rem;">品名</div>
              </el-col>
              <el-col :span="6">
                <div>工单下达总数</div>
              </el-col>
              <el-col :span="6">
                <div>工单派工总数</div>
              </el-col>
              <el-col :span="6">
                <div style="padding-left: 1rem;">工单入库总数</div>
              </el-col>
            </el-row>

          </div>

          <div ref="tableContent9" class="table-content">
            <template v-for="(item, index) in shopOrderManageNum">
              <div class="table-line content-line" v-if="">
                <div
                    style="text-align: center;font-size: 80%;padding-top: 0.5rem;padding-bottom: 0.3rem;letter-spacing: 0.1rem;">
                  <el-row>
                    <el-col :span="6">
                      <div>{{ item.itemName }}</div>
                    </el-col>
                    <el-col :span="6">
                      <div>{{ item.releaseQty }}</div>
                    </el-col>
                    <el-col :span="6">
                      <div>{{ item.dispatchQty }}</div>
                    </el-col>
                    <el-col :span="6">
                      <div>{{ item.erpCompleteQty }}</div>
                    </el-col>
                  </el-row>
                </div>

              </div>
            </template>
          </div>

        </div>
      </el-col>

      <el-col :span="8" style="margin: 1rem;width: 28vw;height: 26vh">
        <div style="text-align: center;color: white;font-size: 1.0rem;font-weight: bold;">设备卫生情况</div>

        <div>
          <div style="font-size: x-small;padding-left: 2rem;padding-top: 0.5rem;color:white;">

            <el-row>
              <el-col :span="4">
                <div style="position: relative;right: 0.1rem;">人员</div>
              </el-col>
              <el-col :span="5">
                <div>设备保养</div>
              </el-col>
              <el-col :span="5">
                <div style="position: relative;left: 0.5rem;">地面保养</div>
              </el-col>
              <el-col :span="5">
                <div style="position: relative;left: 1rem;">现场卫生</div>
              </el-col>
              <el-col :span="5">
                <div style="position: relative;left: 1.2rem;">物料摆放</div>
              </el-col>
            </el-row>

          </div>

          <div ref="tableContent10" class="table-content">
            <template v-for="(item, index) in qualityCheckList">
              <div class="table-line content-line" v-if="">
                <div
                    style="text-align: center;font-size: 80%;padding-top: 0.5rem;padding-bottom: 0.3rem;letter-spacing: 0.1rem;">
                  <el-row>
                    <el-col :span="4">
                      <div>{{ item.personnel }}</div>
                    </el-col>
                    <el-col :span="5">
                      <div>{{ item.deviceKeep }}</div>
                    </el-col>
                    <el-col :span="5">
                      <div>{{ item.groundKeep }}</div>
                    </el-col>
                    <el-col :span="5">
                      <div>{{ item.siteSanitation }}</div>
                    </el-col>
                    <el-col :span="5">
                      <div>{{ item.materialLayOut }}</div>
                    </el-col>
                  </el-row>
                </div>

              </div>
            </template>
          </div>

        </div>
      </el-col>

    </el-row>

    <el-row>


      <el-col :span="8" style="margin: 1rem;width: 38vw;height: 35vh">
        <div style="text-align: center;color: white;font-size: 1.0rem;font-weight: bold;">模具使用</div>
        <div>
          <div style="font-size: x-small;padding-left: 2rem;padding-top: 0.5rem;color:white;">

            <el-row>
              <el-col :span="4" style="position:relative;left: 0.5rem;">
                <div>模具编号</div>
              </el-col>
              <el-col :span="4" style="position:relative;left: 0.5rem;">
                <div>模具名称</div>
              </el-col>
              <el-col :span="4">
                <div>领用时间</div>
              </el-col>
              <el-col :span="4">
                <div>使用时间</div>
              </el-col>
              <el-col :span="4">
                <div style="position: relative;right:1rem;">维修时间</div>
              </el-col>
              <el-col :span="4" style="position: relative;left:1rem;">
                <div>报废时间</div>
              </el-col>
            </el-row>

          </div>

          <div ref="tableContent12" class="table-content">
            <template v-for="(item, index) in toolMakers">
              <div class="table-line content-line" v-if="">
                <div
                    style="text-align: center;font-size: 80%;padding-top: 0.5rem;padding-bottom: 0.3rem;letter-spacing: 0.1rem;">
                  <el-row>
                    <el-col :span="4">
                      <div>{{ item.abrasiveCode }}</div>
                    </el-col>
                    <el-col :span="4">
                      <div>{{ item.abrasiveName }}</div>
                    </el-col>
                    <el-col :span="4">
                      <div style="padding-right: 2rem">{{ item.collectDate }}</div>
                    </el-col>
                    <el-col :span="4">
                      <div style="padding-right: 3rem">{{ item.useInterval }}</div>
                    </el-col>
                    <el-col :span="4">
                      <div style="position: relative;right:3rem;">{{ item.actualRepair }}</div>
                    </el-col>
                    <el-col :span="4">
                      <div style="color: red;position: relative;right:1rem;font-weight: bold;">
                        {{ item.actualScrap }}
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </template>
          </div>

        </div>
      </el-col>

      <el-col :span="8" style="margin: 1rem;width: 28vw;height: 30vh">
        <div style="text-align: center;color: white;font-size: 1.0rem;font-weight: bold;">工单延期提醒</div>
        <div>
          <div style="font-size: x-small;padding-left: 2rem;padding-top: 0.5rem;color:white;">

            <el-row>
              <el-col :span="4">
                <div>工单</div>
              </el-col>
              <el-col :span="6" style="position: relative;left: 3.5rem;">
                <div>品名</div>
              </el-col>
              <el-col :span="4">
                <div style="padding-left: 2.3rem">数量</div>
              </el-col>
              <el-col :span="5">
                <div style="padding-left: 2rem;">完工日期</div>
              </el-col>
              <el-col :span="5">
                <div style="padding-left: 2.3rem;">超期时间</div>
              </el-col>
            </el-row>

          </div>

          <div ref="tableContent11" class="table-content">
            <template v-for="(item, index) in productFiled">
              <div class="table-line content-line">
                <div
                    style="text-align: center;font-size: 80%;padding-top: 0.5rem;padding-bottom: 0.3rem;letter-spacing: 0.1rem;">
                  <el-row>
                    <el-col :span="4">
                      <div>{{ item.shopOrder }}</div>
                    </el-col>
                    <el-col :span="6">
                      <div style="position: relative;left: 2.5rem;">{{ item.itemName }}</div>
                    </el-col>
                    <el-col :span="4">
                      <div style="position: relative;left: 1.4rem;">{{ item.releaseQty }}</div>
                    </el-col>
                    <el-col :span="5">
                      <div style="position: relative;left: 1.2rem;">{{ item.endTime }}</div>
                    </el-col>
                    <el-col :span="5">
                      <div style="position: relative;left: 0.8rem;">{{ item.overdue }}</div>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </template>
          </div>

        </div>
      </el-col>

      <el-col :span="8" style="margin: 1rem;width: 28vw;height: 30vh">
        <div style="text-align: center;color: white;font-size: 1.0rem;font-weight: bold;">卡盘保养</div>
        <div>
          <div style="font-size: x-small;padding-left: 2rem;padding-top: 0.5rem;color:white;">

            <el-row>
              <el-col :span="6">
                <div style="position: relative;left: 0.6rem;">人员</div>
              </el-col>
              <el-col :span="6">
                <div style="position: relative;left: 0.4rem;">所属车间</div>
              </el-col>
              <el-col :span="6">
                <div style="position: relative;">卡盘保养创建时间</div>
              </el-col>
              <el-col :span="6">
                <div style="position: relative;left: 1.4rem;">保养提醒</div>
              </el-col>
            </el-row>

          </div>

          <div ref="tableContent13" class="table-content">
            <template v-for="(item, index) in markScores">
              <div class="table-line content-line" v-if="">
                <div
                    style="text-align: center;font-size: 80%;padding-top: 0.5rem;padding-bottom: 0.3rem;letter-spacing: 0.1rem;">
                  <el-row>
                    <el-col :span="6">
                      <div>{{ item.personnel }}</div>
                    </el-col>
                    <el-col :span="6">
                      <div>{{ item.workShop }}</div>
                    </el-col>
                    <el-col :span="6">
                      <div>{{ item.chunkKeepCreated }}</div>
                    </el-col>
                    <el-col :span="6">
                      <div>{{ item.chunkKeepRemind }}</div>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </template>
          </div>

        </div>


      </el-col>

    </el-row>


    <el-row>

      <el-col :span="8" style="margin: 1rem;width: 38vw;height: 40vh;position: relative;bottom: 4rem;">
        <div>

          <div style="text-align: center;color: white;font-size: 1.0rem;font-weight: bold;">工单未打印提醒</div>

          <div style="font-size: x-small;padding-left: 2rem;padding-top: 0.5rem;color:white;">

            <el-row>
              <el-col :span="4">
                <div style="position: relative;left: 1.6rem;">工序工单号</div>
              </el-col>
              <el-col :span="4">
                <div style="position: relative;left: 2rem;">品名</div>
              </el-col>
              <el-col :span="7">
                <div style="position: relative;left: 5.7rem;">规格</div>
              </el-col>
              <el-col :span="3">
                <div style="position: relative;left: 0.5rem;">已下达数</div>
              </el-col>
              <el-col :span="3">
                <div style="position: relative;left: 1rem;">已派工数</div>
              </el-col>
              <el-col :span="3">
                <div style="position: relative;left: 1rem;">未打印提醒</div>
              </el-col>
            </el-row>

          </div>

          <div ref="tableContent14" class="table-content">
            <template v-for="(item, index) in shopOrderDetails">
              <div class="table-line content-line" v-if="">
                <div
                    style="text-align: center;font-size: 80%;padding-top: 0.5rem;padding-bottom: 0.3rem;letter-spacing: 0.1rem;">
                  <el-row>
                    <el-col :span="4">
                      <div>{{ item.operationOrder }}</div>
                    </el-col>
                    <el-col :span="4">
                      <div>{{ item.itemName }}</div>
                    </el-col>
                    <el-col :span="7">
                      <div>{{ item.itemDesc }}</div>
                    </el-col>
                    <el-col :span="3">
                      <div>{{ item.releasedQty }}</div>
                    </el-col>
                    <el-col :span="3">
                      <div>{{ item.dispatchedQty }}</div>
                    </el-col>
                    <el-col :span="3">
                      <div>{{ item.reminds }}</div>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </template>
          </div>

        </div>
      </el-col>

      <el-col :span="8" style="margin: 1rem;width: 30vw;height: 30vh">
        <div class="left_bottom">
          <SimEcharts :chart-data="pillarData"/>
        </div>
      </el-col>

      <el-col :span="8" style="margin: 1rem;width: 24vw;height: 28vh;">

        <div style="color: white;font-size: 1.8rem;font-weight: bold;letter-spacing: 0.3rem;line-height: 3rem;">
          <ul>
            <li>
              <router-link to="AllOperationsDashBoard?isHidden=true">跳转至管壳车间系统看板</router-link>
            </li>
            <li>
              <router-link to="PolishingOperationsDashBoard?isHidden=true">跳转至抛光车间看板</router-link>
            </li>
            <li>
              <router-link to="CellPackingProduceDashBoard?isHidden=true">跳转至管壳车间生产看板</router-link>
            </li>
            <li>
              <router-link to="GuanKeFactoryScadaStateDashboard?isHidden=true">跳转至管壳车间SCADA看板</router-link>
            </li>
          </ul>
        </div>
      </el-col>

    </el-row>

  </div>


</template>

<script>
import {closeWebsocket, connectWebsocket, sendMessage} from "@/api/websocket";
import {peopleAttendance, devicePolygonalLine} from "@/api/service-module/dashBoard/echartsData";

export default {
  name: "WorkShopProduceManagerScreen",
  data() {
    return {
      pillarData: JSON.parse(JSON.stringify(peopleAttendance)),
      BrokenData: JSON.parse(JSON.stringify(devicePolygonalLine)),
      shopOrderLessList: [
        {
          shopOrder: 'D-GD10210818144',
          itemName: '2YS机筒',
          itemDesc: 'Φ50*Φ48_419_450P_201_外置_亮光_库存处理',
          startTimeWish: '2022-05-17',
          releaseQty: '114',
        },
        {
          shopOrder: 'D-GD10210818144',
          itemName: '2YS机筒',
          itemDesc: 'Φ50*Φ48_419_450P_201_外置_亮光_库存处理',
          startTimeWish: '2022-05-17',
          releaseQty: '114',
        },
        {
          shopOrder: 'D-GD10210818144',
          itemName: '2YS机筒',
          itemDesc: 'Φ50*Φ48_419_450P_201_外置_亮光_库存处理',
          startTimeWish: '2022-05-17',
          releaseQty: '114',
        },
        {
          shopOrder: 'D-GD10210818144',
          itemName: '2YS机筒',
          itemDesc: 'Φ50*Φ48_419_450P_201_外置_亮光_库存处理',
          startTimeWish: '2022-05-17',
          releaseQty: '114',
        },
        {
          shopOrder: 'D-GD10210818144',
          itemName: '2YS机筒',
          itemDesc: 'Φ50*Φ48_419_450P_201_外置_亮光_库存处理',
          startTimeWish: '2022-05-17',
          releaseQty: '114',
        },
        {
          shopOrder: 'D-GD10210818144',
          itemName: '2SD泵筒(明螺纹)',
          itemDesc: 'Φ45*Φ43.4_635_201_亮光',
          startTimeWish: '2022-05-17',
          releaseQty: '114',
        },
        {
          shopOrder: 'D-GD10210818144',
          itemName: '2SD泵筒(明螺纹)',
          itemDesc: 'Φ45*Φ43.4_635_201_亮光',
          startTimeWish: '2022-05-17',
          releaseQty: '114',
        },
        {
          shopOrder: 'D-GD10210818144',
          itemName: '2SD泵筒(明螺纹)',
          itemDesc: 'Φ45*Φ43.4_635_201_亮光',
          startTimeWish: '2022-05-17',
          releaseQty: '114',
        },
      ],
      shopOrderManageNum: [
        {
          itemName: '4QG泵筒',
          releaseQty: '1000',
          dispatchQty: '700',
          erpCompleteQty: '300'
        },
      ],
      qualityCheckList: [
        {
          personnel: '金定乐',
          deviceKeep: '合格',
          groundKeep: '不合格',
          siteSanitation: '合格',
          materialLayOut: '合格',
        },
        {
          personnel: '金定乐',
          deviceKeep: '合格',
          groundKeep: '不合格',
          siteSanitation: '合格',
          materialLayOut: '合格',
        },
        {
          personnel: '金定乐',
          deviceKeep: '合格',
          groundKeep: '不合格',
          siteSanitation: '合格',
          materialLayOut: '合格',
        },
        {
          personnel: '金定乐',
          deviceKeep: '合格',
          groundKeep: '不合格',
          siteSanitation: '合格',
          materialLayOut: '合格',
        },
        {
          personnel: '金定乐',
          deviceKeep: '合格',
          groundKeep: '不合格',
          siteSanitation: '合格',
          materialLayOut: '合格',
        }, {
          personnel: '金定乐',
          deviceKeep: '合格',
          groundKeep: '不合格',
          siteSanitation: '合格',
          materialLayOut: '合格',
        },
      ],
      productFiled: [
        {
          shopOrder: 'D-GD022005253641',
          itemName: '2.5YS机筒',
          releaseQty: '30',
          endTime: '2022-05-30',
          overdue: '5d'
        },
        {
          shopOrder: 'D-GD022005253641',
          itemName: '2.5YS机筒',
          releaseQty: '30',
          endTime: '2022-05-30',
          overdue: '5d'
        },
      ],
      toolMakers: [
        {
          abrasiveCode: '螺纹模',
          abrasiveName: '',
          collectDate: '2022-05-29',
          useInterval: '2022-05-29',
          actualRepair: '2022-05-29',
          actualScrap: '2022-05-29',
        },
      ],
      markScores: [
        {
          personnel: '徐近建',
          workShop: 'A组',
          chunkKeepCreated: '合格',
          chunkKeepRemind: '是'
        },
      ],
      shopOrderDetails: [
        {
          itemName: '4QG泵筒(暗螺纹)',
          itemDesc: 'Φ94*Φ92_187.5_201_含网罩',
          operationOrder: 'D-GD10210818121,1',
          dispatchedQty: '8000',
          releasedQty: '6000',
          reminds: ''
        },
        {
          itemName: '4QG泵筒(暗螺纹)',
          itemDesc: 'Φ94*Φ92_187.5_201_含网罩',
          operationOrder: 'D-GD10210818121,2',
          dispatchedQty: '8000',
          releasedQty: '6000',
          reminds: ''
        },
        {
          itemName: '4QG泵筒(暗螺纹)',
          itemDesc: 'Φ94*Φ92_187.5_201_含网罩',
          operationOrder: 'D-GD10210818121,2',
          dispatchedQty: '8000',
          releasedQty: '6000',
          reminds: ''
        },
        {
          itemName: '4QG泵筒(暗螺纹)',
          itemDesc: 'Φ94*Φ92_187.5_201_含网罩',
          operationOrder: 'D-GD10210818121,1',
          dispatchedQty: '8000',
          releasedQty: '6000',
          reminds: ''
        },

      ],
      array: [],
      array2: []
    }
  },
  methods: {
    reloadWeb() {
      //每隔8小时刷新一下页面，防止卡死
      setTimeout(location.reload, 1000 * 60 * 60 * 8)
    },
    initWebData() {
      connectWebsocket(
          // 测试地址
          process.env.VUE_APP_WS_URL + '/ProduceManagerScreen/WorkShopProduct',
          //'ws://192.168.12.24:20088/ProduceManagerScreen/WorkShopProduct',
          // 传递给后台的数据
          {},
          // 成功拿到后台返回的数据的回调函数
          (data) => {
            let dataJson = JSON.parse(data)
            this.shopOrderLessList = dataJson.selectShopOrderIssues
            this.shopOrderManageNum = dataJson.selectShopOrderDispatch
            this.qualityCheckList = dataJson.selectWorkShopCleanup
            this.productFiled = dataJson.selectShopOrderOverDueTimes
            this.toolMakers = dataJson.selectMouldUseVoList
            this.markScores = dataJson.selectChunkRemindVoList
            this.shopOrderDetails = dataJson.selectWorkShopNoPrintList
            for (let key in dataJson.selectWorkShopAttendanceList) {
              if (this.array.length < 7) {
                this.array.push(key)
              }
            }
            this.pillarData.xAxis.data = this.array

            this.pillarData.series[0].data[0] = dataJson.selectWorkShopAttendanceList['管壳组'][0]
            this.pillarData.series[1].data[0] = dataJson.selectWorkShopAttendanceList['管壳组'][1]
            this.pillarData.series[2].data[0] = dataJson.selectWorkShopAttendanceList['管壳组'][2]

            this.pillarData.series[0].data[1] = dataJson.selectWorkShopAttendanceList['管壳组机筒A线'][0]
            this.pillarData.series[1].data[1] = dataJson.selectWorkShopAttendanceList['管壳组机筒A线'][1]
            this.pillarData.series[2].data[1] = dataJson.selectWorkShopAttendanceList['管壳组机筒A线'][2]

            this.pillarData.series[0].data[2] = dataJson.selectWorkShopAttendanceList['管壳组机筒B线'][0]
            this.pillarData.series[1].data[2] = dataJson.selectWorkShopAttendanceList['管壳组机筒B线'][1]
            this.pillarData.series[2].data[2] = dataJson.selectWorkShopAttendanceList['管壳组机筒B线'][2]

            this.pillarData.series[0].data[3] = dataJson.selectWorkShopAttendanceList['管壳组机筒C线'][0]
            this.pillarData.series[1].data[3] = dataJson.selectWorkShopAttendanceList['管壳组机筒C线'][1]
            this.pillarData.series[2].data[3] = dataJson.selectWorkShopAttendanceList['管壳组机筒C线'][2]

            this.pillarData.series[0].data[4] = dataJson.selectWorkShopAttendanceList['管壳组机筒D线'][0]
            this.pillarData.series[1].data[4] = dataJson.selectWorkShopAttendanceList['管壳组机筒D线'][1]
            this.pillarData.series[2].data[4] = dataJson.selectWorkShopAttendanceList['管壳组机筒D线'][2]


            this.pillarData.series[0].data[5] = dataJson.selectWorkShopAttendanceList['管壳组机筒E线'][0]
            this.pillarData.series[1].data[5] = dataJson.selectWorkShopAttendanceList['管壳组机筒E线'][1]
            this.pillarData.series[2].data[5] = dataJson.selectWorkShopAttendanceList['管壳组机筒E线'][2]


            this.pillarData.series[0].data[6] = dataJson.selectWorkShopAttendanceList['管壳组机筒F线'][0]
            this.pillarData.series[1].data[6] = dataJson.selectWorkShopAttendanceList['管壳组机筒F线'][1]
            this.pillarData.series[2].data[6] = dataJson.selectWorkShopAttendanceList['管壳组机筒F线'][2]

          },
          () => {
            sendMessage("Im tired!")
          }
      )
    },
    initData() {
      this.pillarData.title.text = '人员出勤'
      this.pillarData.title.textStyle.fontSize = '20'
      this.pillarData.title.textStyle.color = '#fffffb'

      this.BrokenData.title.text = '设备状态'
      this.BrokenData.title.textStyle.fontSize = '20'
      this.BrokenData.title.textStyle.color = '#fffffb'
    },
    rollText() {
      let speed = 280
      let that = this
      let tmpHi = 0

      function Marquee() {

        if (that.$refs.tableContent8) {
          tmpHi = that.$refs.tableContent8.scrollTop++
          if (tmpHi === that.$refs.tableContent8.scrollTop) {
            that.$refs.tableContent8.scrollTop = 0
          }
        }

        if (that.$refs.tableContent9) {
          tmpHi = that.$refs.tableContent9.scrollTop++
          if (tmpHi === that.$refs.tableContent9.scrollTop) {
            that.$refs.tableContent9.scrollTop = 0
          }
        }

        if (that.$refs.tableContent10) {
          tmpHi = that.$refs.tableContent10.scrollTop++
          if (tmpHi === that.$refs.tableContent10.scrollTop) {
            that.$refs.tableContent10.scrollTop = 0
          }
        }

        if (that.$refs.tableContent11) {
          tmpHi = that.$refs.tableContent11.scrollTop++
          if (tmpHi === that.$refs.tableContent11.scrollTop) {
            that.$refs.tableContent11.scrollTop = 0
          }
        }

        if (that.$refs.tableContent12) {
          tmpHi = that.$refs.tableContent12.scrollTop++
          if (tmpHi === that.$refs.tableContent12.scrollTop) {
            that.$refs.tableContent12.scrollTop = 0
          }
        }

        if (that.$refs.tableContent13) {
          tmpHi = that.$refs.tableContent13.scrollTop++
          if (tmpHi === that.$refs.tableContent13.scrollTop) {
            that.$refs.tableContent13.scrollTop = 0
          }
        }

        if (that.$refs.tableContent14) {
          tmpHi = that.$refs.tableContent14.scrollTop++
          if (tmpHi === that.$refs.tableContent14.scrollTop) {
            that.$refs.tableContent14.scrollTop = 0
          }
        }

      }

      setInterval(Marquee, speed) //设置定时器
    }
  },
  created() {
    this.reloadWeb()
    this.initData()
    this.initWebData()
  },
  mounted() {
    this.rollText()
  },
  destroyed() {
    closeWebsocket()
  }
}
</script>

<style lang="scss" scoped>
.container {
  background-image: url("../../assets/manage_board/06.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;

  .table-content {
    height: 23vh;
    color: #ffffff;
    overflow: hidden;
    margin-top: 0.5rem;

    .table-line:nth-of-type(odd) {
      background: rgba(122, 178, 203, 0.22);
    }

    .table-line:nth-of-type(even) {
      background: rgba(213, 196, 127, 0.22);
    }

    .table-line {
      position: relative;
      border: 1px solid rgba(23, 17, 17, 0.98);
      border-radius: 5px;
      color: cyan;
      margin-top: 0.2rem;
      line-height: 1.2rem;

      .line-cell {
        word-wrap: break-word;
      }
    }

  }

  .left_bottom {
    position: relative;
    bottom: 5rem;
  }

}


</style>
